<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue定制方法-methods</title>
    <!--1 导入vue-->
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <!--2 设定html里面应用的vue区域-->
    <div id="vue_mount">
        第二个信息: {{counter}}
    </div>
</body>

</html>
<script>
   // 3 定制vue的基本逻辑
    const app = Vue.createApp({
        // 3-1 定制专属的属性数据
        data() {
            return {
                counter: 0
            }
        },
        // 3-2 定制专属的操作属性方法 methods
        methods: {
            // 定制自己的函数方法
            my_methods() {
                this.counter++
            }
        }
    })
    // 4 将vue对象挂载到html区域
    const vm = app.mount('#vue_mount')
    console.log("执行methods前的counter的值: ", vm.counter)
    vm.my_methods()
    console.log("执行methods后的counter的值: ", vm.counter)
    vm.my_methods()
    console.log("执行methods后的counter的值: ", vm.counter)

</script>


